<template>
    <div>
        <el-menu router active-text-color="#ffd04b" background-color="#9999FF" class="el-menu-vertical-demo"
            :default-active="defaultActive" text-color="#fff" unique-opened>
            <el-menu-item index="/home">
                <template #title>
                    <el-icon>
                        <Menu />
                    </el-icon>
                    <span>首页</span>
                </template>
            </el-menu-item>
            <el-sub-menu v-for="item in store.getters.getUser.menus" :index="item.id.toString()" :key="item.id">
                <template #title>
                    <el-icon>
                        <component :is="item.icon"></component>
                    </el-icon>
                    <span>{{ item.title }}</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item v-for="menu in item.children" :index="menu.url" :key="menu.id">{{ menu.title
                    }}</el-menu-item>
                </el-menu-item-group>
            </el-sub-menu>
        </el-menu>
    </div>
</template>
<script lang='ts' setup>
import { useStore } from 'vuex'
let store = useStore()
const defaultActive = '/home'
</script>
<style lang='less' scoped></style>